<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/skin.css" />
		<link href='http://www.youziku.com/webfont/CSS/5d334bf7fe0016f67d79422077bcbc7e' rel='stylesheet' type='text/css' />
		<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="js/queryloader2.min.js"></script>
		<style>
			body,
			html {
				height: 100%;
			}
		</style>

	</head>

	<body>
		<div class="dgx-container" id="index">
			<div class="bg"></div>
			<!--<div class="btn_rule">
				<a href="javascript:void(0);" id="rule">活动规则</a>
			</div>-->
			<div class="body-con">
				<div class="show-con">
					<div class="con_top">
						<a href="javascript:void(0);">
							<span></span>
						</a>
						<a href="javascript:void(0);">
							<span></span>
						</a>
						<a href="javascript:void(0);">
							<span></span>
						</a>
						<a href="javascript:void(0);" class="gray">
							<span></span>
						</a>
						<a href="javascript:void(0);" class="gray">
							<span></span>
						</a>
						<a href="javascript:void(0);" class="gray">
							<span></span>
						</a>
					</div>
					<div class="con_bot">
						<div class="scroll">
							<div class="scroll-con">
								<a href="javascript:void(0);">
									<img src="img/boy1.png" />
								</a>
								<a href="javascript:void(0);">
									<img src="img/girl2.png" />
								</a>
								<a href="javascript:void(0);">
									<img src="img/fj3.png" />
								</a>
								<a href="javascript:void(0);"></a>
								<a href="javascript:void(0);"></a>
								<a href="javascript:void(0);"></a>
								<a href="javascript:void(0);"></a>
								<a href="javascript:void(0);"></a>
								<a href="javascript:void(0);"></a>
							</div>
						</div>
					</div>
				</div>
				<div class="btn_cj">
					<a href="javascript:void(0);" id="cj" class="margin_r2">
						<img src="img/btn_cj.png" alt="我要参加" />
					</a>
					<a href="javascript:void(0);" id="yq" style="display: none;">
						<img src="img/btn_yq.png" alt="邀请好友帮忙翻牌" />
					</a>
					<br />
					<a href="javascript:void(0);" id="rule" class="margin_r">
						<img src="img/btn_rule.png" alt="活动规则" />
					</a>
				</div>
			</div>
		</div>
		<!--分享-->
		<div class="share" style="display: none;" id="share"></div>
		<!--领奖页面-->
		<div class="success" style="display: none;" id="success">
			<div class="body-con">
				<div class="bg"></div>
				<div class="success_bot">
					<img src="img/success_bot.png" />
				</div>
				<div class="jp_inf">
					<div class="jp_con">
						<h3 style="font-family:zzgflihei558875;">华侨城·创想中心星光音乐节<br />电子门票一张
			</h3>
					</div>
					<div class="jq">
						<div class="jq_bg"></div>
						<span class="first_zq">NO.001正券</span>
						<span class="jq_con">
							<span class="_fj">副<span>券</span></span>
						</span>
						<span class="jq_prise">票价<em>380</em>元</span>
					</div>
					<div class="lj_inf">
						<p>请凭手机电子门票页面入场</p>
						<p><em>活动时间：</em>2015年11月29日18:30</p>
						<p><em>活动地点：</em>华侨城·创想中心</p>
						<p>
							<a href="javascript:void(0);" class="jr">
								<img src="img/mobile.png" alt="点击进入手机导航" />
							</a>
						</p>
						<p><em>咨询电话：</em>028-61898899</p>
						<p>
							<a href="javascript:void(0);" class="bd">
								<img src="img/call.png" alt="点击拨打" />
							</a>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!--活动规则-->
		<div class="cover-box" style="display: none;" id="acv_html">
			<div class="box_con">
				<div class="btn_close">
					<b></b>
				</div>
				<div class="rule_con">
					<img src="img/rule.png" alt="活动规则" class="act_rule" />
					<p class="border_top">1、参与抢票需关注华侨城·创想中心官方微信号；</p>
					<p>2、成功邀请6位好友点亮创想中心，即可获得2015华侨城·创想中心城市建筑艺术音乐节电子门票一张，限量1000张，送完即止；</p>
					<p>3、获得音乐节门票的朋友，请凭朋友圈分享和手机电子门票页面入场；</p>
					<p>4、本次活动最终解释权归华侨城·创想中心所有。</p>
				</div>
			</div>
		</div>
		<div class="audioControl play"></div>
		<div style="display: none;">
			<audio id="media" style="display:none;" src="img/media.mp3" loop controls></audio>
		</div>
		<script>
			$("body").queryLoader2({
				barColor: "#efefef",
				backgroundColor: "#111",
				percentage: true,
				barHeight: 1,
				minimumTime: 1000,
				fadeOutTime: 1000,
				onComplete: function() {
					$("#cj").on("click", function() {
						$("#yq").show();
						$(this).hide();
					});
					$("#yq").on("click", function() {
						$("#share").show();
						$("#rule").hide();
					});
					$("#share").on("click", function() {
						$("#success").show();
						$(this).hide();
						$("#index").hide();
					});
					$("#rule").on("click", function() {
						$("#acv_html").show();
						$("#acv_html").on("click",function(){
							$(this).hide();
						});
					});
					$("#rule").on("click", function() {
						return false;
					});
					$(".gray").one("click",function(){
						$(this).addClass("turn");
						var that=this;
						setTimeout(function(){
							$(that).removeClass("gray");
						},500)
					});
				}
			});
			$(function(){
				var audio = document.getElementById("media");
				audio.play();
					$(".audioControl").bind("click", function() {
						if ($(this).hasClass("play")) {
							$(this).removeClass("play");
							$(this).addClass("stop");
							audio.pause();
						} else {
							$(this).removeClass("stop");
							$(this).addClass("play");
							audio.play();
						}
					});
			});
		</script>
	</body>

</html>